<template>
  <div class="container box">
    <div class="operate-btn">
      <el-button size="mini" class="btn" type="primary" @click="readFn"
        >全部已读</el-button
      >
    </div>
    <!-- <div class="tableBox">
      <div class="tableBoxChild">
        <el-table :data="tableData">
          <el-table-column label="序号" align="center" type="index">
          </el-table-column>
          <el-table-column prop="name" label="舆情名称" align="center">
          </el-table-column>
          <el-table-column prop="content" label="数据来源" align="center">
          </el-table-column>
          <el-table-column prop="createDate" label="数据日期" align="center">
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="viewInfo(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageFn"
      >
      </el-pagination>
    </div> -->
    <div class="tableBox table-panel">
      <div class="tableBoxChild">
        <CommonTable
          :tableColumns="tableColumns"
          :tableData="tableData"
          :page="page"
          @handerSortChange="handerSortChange"
          @filterTable="filterTable"
        />
      </div>
      <div class="con-footer pagination" style="float: right">
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="pageFn"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="舆情详情"
      width="80%"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <div class="detail-title">
        <h1>{{ detailInfo.title }}</h1>
        <div>
          <span class="info">日期：{{ detailInfo.date }}</span>
          <span class="info">来源：{{ detailInfo.source }}</span>
          <span class="info">作者：{{ detailInfo.author }}</span>
        </div>
      </div>
      <div class="detail-info1">
        <span>新闻相关公司：</span>
        <span>{{ detailInfo.info1 }}</span>
      </div>
      <div class="detail-info2">
        <span>负面影响相关公司：</span>
        <span>
          <el-link href="" target="_blank" type="warning">{{
            detailInfo.info2
          }}</el-link></span
        >
      </div>
      <div class="detail-info3">
        <div>同公司负面新闻：</div>
        <div class="info-list">
          <div
            v-for="(item, index) in detailInfo.info3"
            :key="index"
            class="info-item"
          >
            <span class="flex-item1">
              <el-link href="" target="_blank" type="warning">{{
                item.content
              }}</el-link></span
            >
            <span class="flex-item2">{{ item.source }}</span>
            <span class="flex-item3">{{ item.date }}</span>
          </div>
        </div>
      </div>
      <div class="detail-info3">
        <div>同公司所有新闻：</div>
        <div class="info-list">
          <div
            v-for="(item, index) in detailInfo.info4"
            :key="index"
            class="info-item"
          >
            <span class="flex-item1">
              <el-link href="" target="_blank" type="warning">{{
                item.content
              }}</el-link></span
            >
            <span class="flex-item2">{{ item.source }}</span>
            <span class="flex-item3">{{ item.date }}</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination';
import CommonTable from '@/components/CommonTable';
import { custNewsInfo, updateCustNews } from '@/api/customerList/index.js';
export default {
  name: 'RemindersOne',
  components: {
    Pagination,
    CommonTable,
  },
  data() {
    return {
      page: {
        page: 1,
        size: 10,
      },
      tableColumns: [
        {
          column: 'title',
          label: '舆情名称',
          align: 'left',
          overflow: true, // 超出长度
          show: true, // 是否显示
          width: 120,
          sortable: false, // true, false, 'custom'(远程handerSortChange)
          headerFilter: false,
          filterType: 'input', // select,input,date,daterange,空
          filterValue: 'customerNm',
          // headerFilterList: [
          //   {
          //     text: "111",
          //     value: "111",
          //     id: "待办名称",
          //   },
          //   {
          //     text: "222",
          //     value: "333",
          //     id: "待办名称",
          //   },
          //   {
          //     text: "444",
          //     value: "444",
          //     id: "待办名称",
          //   },
          //   {
          //     text: "555",
          //     value: "555",
          //     id: "待办名称",
          //   },
          // ],
        },
        {
          column: 'custName',
          label: '涉及客户',
          align: 'left',
          overflow: true, // 超出长度
          show: true, // 是否显示
          sortable: false,
          // width: 120,
          headerFilter: true,
          filterType: 'select', // select,input,date,daterange,空
          filterValue: [],
          headerFilterList: [
            {
              text: '1',
              value: '中国建设银行',
              id: '1',
            },
            {
              text: '2',
              value: '中国工商银行',
              id: '2',
            },
          ],
        },
        {
          column: 'resource',
          label: '数据来源',
          align: 'left',
          overflow: true, // 超出长度
          show: true, // 是否显示
          width: 100,
          sortable: false,
          headerFilter: false,
          // filterType: "input",
          // filterValue: "text",
        },
        {
          column: 'dataDate',
          label: '数据日期',
          align: 'left',
          overflow: true, // 超出长度
          show: true, // 是否显示
          width: 140,
          sortable: false,
          headerFilter: true,
          filterType: 'date',
          filterValue: '',
        },
        {
          column: 'beRead',
          label: '状态',
          align: 'left',
          overflow: true, // 超出长度
          show: true, // 是否显示
          sortable: false,
          // width: 120,
          headerFilter: true,
          filterType: 'select', // select,input,date,daterange,空
          filterValue: [],
          headerFilterList: [
            {
              text: '1',
              value: '未读',
              id: '1',
            },
            {
              text: '2',
              value: '已读',
              id: '2',
            },
          ],
        },
      ],
      tableData: [
        {
          name: '震惊，时代银通...',
          content: '时代周报',
          createDate: '2022-12-12',
          status: '未读',
          involvingCustomers: '中国建设银行',
        },
        {
          name: '震惊，时代银通...',
          content: '时代周报',
          createDate: '2022-12-12',
          status: '未读',
          involvingCustomers: '中国工商银行',
        },
      ],
      detailInfo: {
        title:
          '突发！千亿集团董事长被查，控股6加A股上市公司，还是中国电信第二大股东',
        date: '2022-09-04 21:06:00',
        source: '红星资本局',
        author: '作者',
        info1: '易方达基金管理有限公司',
        info2: '突发！千亿集团董事长被查，六天前曾发表廉政讲话',
        info3: [
          {
            content: '突发！千亿集团董事长被查，六天前曾发表廉政讲话',
            source: '华夏时报',
            date: '2022-09-04 17:11:00',
          },
          {
            content: '突发！千亿集团董事长被查，六天前曾发表廉政讲话',
            source: '华夏时报',
            date: '2022-09-04 17:11:00',
          },
          {
            content: '突发！千亿集团董事长被查，六天前曾发表廉政讲话',
            source: '华夏时报',
            date: '2022-09-04 17:11:00',
          },
          {
            content: '突发！千亿集团董事长被查，六天前曾发表廉政讲话',
            source: '华夏时报',
            date: '2022-09-04 17:11:00',
          },
          {
            content: '突发！千亿集团董事长被查，六天前曾发表廉政讲话',
            source: '华夏时报',
            date: '2022-09-04 17:11:00',
          },
        ],
        info4: [
          {
            content: '突发！千亿集团董事长被查，六天前曾发表廉政讲话',
            source: '华夏时报',
            date: '2022-09-04 17:11:00',
          },
          {
            content: '突发！千亿集团董事长被查，六天前曾发表廉政讲话',
            source: '华夏时报',
            date: '2022-09-04 17:11:00',
          },
          {
            content: '突发！千亿集团董事长被查，六天前曾发表廉政讲话',
            source: '华夏时报',
            date: '2022-09-04 17:11:00',
          },
          {
            content: '突发！千亿集团董事长被查，六天前曾发表廉政讲话',
            source: '华夏时报',
            date: '2022-09-04 17:11:00',
          },
          {
            content: '突发！千亿集团董事长被查，六天前曾发表廉政讲话',
            source: '华夏时报',
            date: '2022-09-04 17:11:00',
          },
        ],
      },
      total: 0,
      count: '',
      dialogVisible: false,
    };
  },

  async mounted() {
    await this.getList();
  },

  methods: {
    async getList() {
      const parmas = {
        customerId: '',
        dataDate: '',
        beRead: '',
        pageNum: 1,
        pageSize: 10,
      };
      const res = await custNewsInfo(parmas);
      this.tableData = res.data.records;
      console.log(res, '888');
    },
    // 远程排序
    handerSortChange({ column, prop, order }) {
      console.log('sortChange 点击排序', column, prop, order);
    },
    async readFn() {
      const arr = [];
      this.tableData.forEach((v) => {
        arr.push(v.rowNo);
      });
      console.log(arr, 'arr');
      const params = {
        rowNos: arr.join(','),
      };
      const res = await updateCustNews(params);
      console.log(res, 'res');
    },
    // 远程搜索
    filterTable(obj) {
      console.log('filterTable 点击筛选', obj);
    },
    viewInfo(row) {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    pageFn(currentPage) {
      // queryBondProbabilityDetail({
      //   bondId: this.bondInfo.bondId,
      //   page: currentPage,
      //   pn: 10,
      // }).then((res) => {
      //   this.tableData = res.data.result;
      //   this.total = Number(res.data.totalResults);
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-link {
  vertical-align: bottom;
}
.detail-title {
  text-align: center;
  margin-bottom: 20px;
  .info {
    margin-right: 20px;
    color: #d6dcff;
  }
}
.detail-info1 {
  height: 28px;
  line-height: 28px;
  span:last-child {
    color: #d6dcff;
  }
}
.detail-info2 {
  height: 28px;
  line-height: 28px;
}
.detail-info3 {
  margin-top: 20px;
  .info-list {
    .info-item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 2px 10px;
      color: #d6dcff;
      .flex-item1 {
        text-align: left;
      }
      .flex-item2 {
        text-align: center;
      }
      .flex-item3 {
        text-align: right;
      }
    }
  }
}
.container {
  background-color: #262d47;
}
.operate-btn {
  padding: 10px 10px 0 10px;
}
.el-table ::v-deep th.el-table__cell {
  background-color: #1c2238 !important;
  color: #fff;
}

.tableBox {
  background-color: #262d47;
  flex: 1;
  padding: 15px 10px;
}

.tableBoxChild {
  min-height: 500px;
}

.el-pagination {
  text-align: right;
}
</style>
